<template>
  <div
    class="gdap-esticollege"
    style="width: 100%; height: 90%; background: white; margin: 0 auto; overflow: auto;"
  >
    <el-row style="height: 100%">
      <el-col :span="4">
        <div class="gdap-colleage-avatar">
          <img :src="colleageAvatar" class="gdap-colleage-avatar-img" style="width:70%;margin:20px">
          <div
            style="height: 60px;width: 100%; line-height: 60px; color: #444; font-size: 30px; text-indent: 20px;"
          ></div>
        </div>

        <div>
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span>
                <a href="#lqgl" style="text-decoration: none;color: #999;">录取概率</a>
              </span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span>
                <a href="#tjzy" style="text-decoration: none;color: #999;">推荐专业</a>
              </span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-setting" style="color:#409EFF"></i>
              <span>
                <a href="#zsjh" style="text-decoration: none;color: #999;">招生计划</a>
              </span>
            </el-menu-item>

            <!-- 数据不支持，暂不使用 2019-04-18 -->
            <!--            <el-menu-item index="3">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>考生成绩</span>-->
            <!--            </el-menu-item>-->
            <!--            <el-menu-item index="4">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>考生来源</span>-->
            <!--            </el-menu-item>-->
            <!--            <el-menu-item index="5">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>分数线</span>-->
            <!--            </el-menu-item>-->
            <el-menu-item index="6" v-if="yxPinggu">
              <i class="el-icon-menu" style="color:#409EFF"></i>
              <span>
                <a href="#yxPinggu" style="text-decoration: none;color: #999;">优势学科</a>
              </span>
            </el-menu-item>
            <!-- 入口改为首页 2019-04-18 -->
            <!--            <el-menu-item index="7">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>预测录取</span>-->
            <!--            </el-menu-item>-->
            <el-menu-item>
              <i class="el-icon-back" style="color:#409EFF"></i>
              <span v-on:click="back" style="color: #999;">返回上一页</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="20">
        <div
          style="width: 100%; height: 60px; padding: 0; margin: 0; line-height: 60px;text-align:center"
        >
          <span style="font-size: 40px; font-weight: 500;color:#000;">{{colleageName}}</span>
        </div>
        <el-row style="color: #000;">
          <el-col :span="3" style="text-align:center">
            <div style="border-left: 4px solid rgb(255, 178,37);">
              <h3 id="lqgl" style="margin-left: 1%;">录取概率</h3>
            </div>
          </el-col>
          <el-col :span="18" style="margin:2.3em 0">
            <el-progress :text-inside="gl" :stroke-width="20" :percentage="gl"></el-progress>
          </el-col>
        </el-row>
        <el-row>
          <div style="text-align: center;margin-top: 5px;">
            <el-radio-group v-model="selctPc" size="medium">
              <el-radio-button
                border
                v-for="item in pcMap"
                :label="item"
                :key="item.pcdm"
              >{{item.pcmc+"("+item.yzmc+")"}}</el-radio-button>
            </el-radio-group>
            <!-- 录取概率为:
            <span>{{gl | formatDiscount}}%</span>-->
          </div>

          <el-col :span="24">
            <div id="graph" style="height:600px;margin-top: 20px"></div>
          </el-col>
        </el-row>
        <el-row style="color: #000;" id="tjzy">
          <el-col :span="3" style="text-align:center">
            <div style="border-left: 4px solid rgb(255, 178,37);">
              <h3>推荐专业</h3>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24" style="padding:0.8em;background-color: #FDF6EC;">
            <i class="el-icon-warning"></i> 注意说明：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br>专业类别：
            <el-tag type="success">符合</el-tag>
            &nbsp;&nbsp;
            
            <el-tag type="warning">符合</el-tag>
            &nbsp;&nbsp;
            
            <el-tag type="danger">不符合</el-tag>
            <br>录取概率：
            <span class="gl1" style="padding-left: 10px;color: #24d341;">稳妥</span>
            <span class="gl1" style="padding-left: 10px;color: #f39800;">适中</span>
            <span class="gl1" style="padding-left: 5px;color:#ff4436;"> 冲刺</span>
        </el-col>-->

        <el-col>
          <el-col :span="24">
            <el-table
              :data="totalData.slice((tjCurrentPage-1)*pageSize,tjCurrentPage*pageSize)"
              style="width: 100%;"
              border
              v-if="currentData!=null"
              :empty-text="tjData"
            >
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="pcmc" label="批次名称"></el-table-column>
              <el-table-column prop="yzmc" label="语种"></el-table-column>
              <el-table-column prop="zymc" label="专业">
                <template slot-scope="scope">
                  <el-tag :type="getGLcss(scope.row.zytype)">{{scope.row.zymc}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="xzdm" label="学制" width="100">
                <template slot-scope="scope">{{ scope.row.xzdm ? scope.row.xzdm : '--'}}年</template>
              </el-table-column>
              <el-table-column prop="sfbz" label="学费(元/年)" width="130">
                <template slot-scope="scope">{{ scope.row.sfbz ? scope.row.sfbz : '--'}}</template>
              </el-table-column>
              <el-table-column prop="zsjhs" label="招生数"></el-table-column>
              <el-table-column prop="gl" label="概率">
                <template slot-scope="scope">
                  <span class="C" v-if="scope.row.gl*100<30">冲刺</span>
                  <span class="B" v-if="scope.row.gl*100<=70&&scope.row.gl*100>=30">适中</span>
                  <span class="A" v-if="scope.row.gl*100>70">稳妥</span>
                  <!-- {{ scope.row.gl ? scope.row.gl : '--' | formatDiscount}}% -->
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="margin-top:3%;text-align:center">
            <div style="text-align: center;margin-top: 30px;">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :total="tjTotal"
                @current-change="zycurrent_change"
              ></el-pagination>
            </div>
          </el-col>
          <el-col :span="24">
            <el-row style="color: #000;" id="zsjh">
              <el-col :span="3" style="text-align:center">
                <div style="border-left: 4px solid rgb(255, 178,37);">
                  <h3>招生计划</h3>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-table
                border
                :data="zsInfoData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                style="width: 100%"
              >
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="yzmc" label="语种"></el-table-column>
                <el-table-column prop="klmc" label="科类"></el-table-column>
                <el-table-column prop="zydh" label="专业代号"></el-table-column>
                <el-table-column prop="zymc" label="专业名称"></el-table-column>
                <el-table-column prop="jhxzmc" label="计划性质"></el-table-column>
                <el-table-column prop="pcmc" label="批次名称"></el-table-column>
                <el-table-column label="学制">
                  <template slot-scope="scope">{{scope.row.xzdm}}年</template>
                </el-table-column>
                <el-table-column prop="sfbz" label="学费"></el-table-column>
                <el-table-column prop="zsjhs" label="招生数"></el-table-column>
                <el-table-column prop="zyDes" label="专业说明"></el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 30px;">
                <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :total="total"
                  @current-change="current_change"
                ></el-pagination>
              </div>
            </el-row>
          </el-col>

          <el-col v-if="yxPinggu" :span="24">
            <el-row>
              <el-col :span="3" style="text-align:center">
                <div style="border-left: 4px solid rgb(255, 178,37);">
                  <h3>优势学科</h3>
                </div>
              </el-col>
              <div id="yxPinggu">
                <p>依据2017年12月第四次全国高校学科评估结果</p>
                <el-table :data="yxPingguData.slice((pingguCurrentPage-1)*pageSize,pingguCurrentPage*pageSize)" style="width: 100%">
                  <el-table-column prop="xkmc" label="学科名称" width="180"></el-table-column>
                  <el-table-column prop="xkdm" label="学科代码" width="180"></el-table-column>
                  <el-table-column prop="xkml" label="学科门类"></el-table-column>
                  <el-table-column prop="mldm" label="门类代码"></el-table-column>
                  <el-table-column prop="pgjg" label="评估结果"></el-table-column>
                  <el-table-column prop="pgmc" label="评估名次"></el-table-column>
                  <el-table-column prop="pgdc" label="评估档次"></el-table-column>
                  <el-table-column label="是否为一流学科">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.ylxk === 0" type="danger">否</el-tag>
                      <el-tag v-else type="success">是</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cpzs" label="该学科参评总数"></el-table-column>
                </el-table>
                <div style="text-align: center;margin-top: 30px;">
                  <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="yxpingguDataTotal"
                    @current-change="pinggu_current_change"
                  ></el-pagination>
                </div>
              </div>
            </el-row>
          </el-col>
          <el-col :span="24" style="text-align: center; margin-top: 3%;">
            <el-button @click="backToHome">返回首页</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title :visible.sync="centerDialogVisible" width="70%" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/utils/api";
import { hexToRgb } from "@/utils/utils";
import { color2 } from "@/constants/constants";
export default {
  data() {
    return {
      yxpingguDataTotal: 0,
      tjData: "",
      tjTotal: 0,
      totalData: [],
      currentData: [],
      currentPage: 1,
      tjCurrentPage: 1,
      pingguCurrentPage: 1,
      pageSize: 10,
      pcListMap: {},
      pcMap: {},
      selctPc: "",
      gl: "",
      centerDialogVisible: false,
      //以下为传入参数
      kldm: JSON.parse(localStorage.getItem("estimateparam")).kldm,
      yxdm: JSON.parse(localStorage.getItem("estimateparam")).yxdm,
      zf: JSON.parse(localStorage.getItem("estimateparam")).zf,
      yzmc: JSON.parse(localStorage.getItem("estimateparam")).yzmc,
      userId: JSON.parse(localStorage.getItem("user")).userId,
      px: JSON.parse(localStorage.getItem("estimateparam")).px,
      isDistribution: "1",
      colleageAvatar: "",
      zsInfoData: [],
      total: 0,
      yxPinggu: false,
      yxPingguData: [],
      colleageName: ""
    };
  },
  methods: {
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    zycurrent_change: function(currentPage) {
      this.tjCurrentPage = currentPage;
    },
    pinggu_current_change: function(currentPage) {
      this.pingguCurrentPage = currentPage
    },
    initYxPinggu() {
      api({
        url: "/nceeSysMgr/rest/sendGet/analysis/rest/getYXPingGuInfo",
        method: "get",
        params: {
          yxdm: this.$route.params.yxdm
        }
      }).then(res => {
        if (res.status === 200 && res.data.length > 0) {
          this.yxPingguData = res.data;
          this.yxpingguDataTotal = this.yxPingguData.length
          this.yxPinggu = true;
        }
      });
    },
    initZsInfo() {
      api({
        url: "/nceeSysMgr/rest/sendGet/analysis/rest/getYxJh",
        method: "get",
        params: {
          yxdm: this.yxdm
        }
      }).then(res => {
        console.log(res.data);
        this.total = res.data.length;
        this.zsInfoData = res.status === 200 ? res.data : "";
      });
    },
    back() {
      this.$router.go(-1)
    },
    backToHome() {
      this.$router.push("/");
    },
    paginate_change() {
      this.paginate_function(this.currentPage, this.pageSize);
    },
    paginate_function(page, maxisze) {
      this.currentData = this.totalData.slice(
        (page - 1) * maxisze,
        (page - 1) * maxisze + maxisze
      );
    },
    getData() {
      var params = {
        isDistribution: this.isDistribution,
        kldm: this.kldm,
        px: this.px + "",
        userId: this.userId,
        yxdm: this.yxdm,
        yzmc: this.yzmc,
        zf: this.zf
      };
      api({
        url:
          "/nceeSysMgr/rest/sendPost/analysis/rest/getRecFromSpecifiedCollege",
        method: "post",
        data: params
      })
        .then(res => {
          if (res.status == 200) {
            // for (const i = 0; i < res.data.preDetails.length; i ++) {
            //   if (res.data.preDetails[i].zy.length <= 0) {
            //     this.tjData = res.data.preDetails[i].editInfo
            //   }
            // }

            if (JSON.stringify(res.data) !== "{}") {
              this.$message({
                message: res.data.preInfo,
                type: "success"
              });
              var data = res.data;

              this.colleageName = data.preDetails[0].yxmc;
              for (const key in data.preDetails) {
                if (key == 0) {
                  this.tjData = res.data.preDetails[0].editInfo;
                }
                if (data.preDetails.hasOwnProperty(key)) {
                  const element = data.preDetails[key];
                  this.colleageAvatar =
                    "http://222.82.250.217:81/nceeSysMgr/xiaohui/" +
                    element.yxmc +
                    ".jpg";
                  for (const key in element.zy) {
                    if (element.zy.hasOwnProperty(key)) {
                      const obj = element.zy[key];
                      this.totalData.push(obj);
                    }
                  }
                  this.tjTotal = this.totalData.length;
                }
              }

              //初始化分页数据
              this.paginate_function(1, 10);

              this.pcListMap = {};
              for (var i in data.preDetails) {
                var obj = data.preDetails[i];
                obj.state = false;
                this.pcMap[obj.pcdm] = obj;
                var arr = new Array();
                for (var j in obj.zy) {
                  var zyObj = obj.zy[j];
                  zyObj.pcdm = obj.pcdm;
                  zyObj.pcmc = obj.pcmc;
                  zyObj.yzmc = obj.yzmc;
                  zyObj.userRank = obj.userRank;
                  arr.push(zyObj);
                }
                if (obj.zy.length === 0) {
                  obj.zymc = obj.editInfo;
                  arr.push(obj);
                }
                this.pcListMap[obj.pcdm] = arr;
              }

              if (data.preDetails.length > 0) {
                this.changePc(data.preDetails[0].pcdm);
                this.selctPc = data.preDetails[0];
              } else {
                this.$message({
                  message: data.editInfo,
                  type: "warning"
                });
              }
            }
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    showEchart(allYearfb, yxmc, userRank, pc, zymc) {
      var myChart = this.$echarts.init(document.getElementById("graph"));
      var option;
      var series = [];
      var max = 0;
      var td = 100; //间隔数
      var itv = {};
      var pcname = "";
      if (pc == 1 || pc == 2) pcname = "本科" + pc + "批次";
      else if (pc == 5) pcname = "专科层次";
      var cc = 0;
      var zys = "";
      var tmpObj = getArr(allYearfb.lqfb);
      var maxY = getMax(allYearfb.lqfb);
      itv["全专业排名"] = allYearfb.interval;
      td = allYearfb.interval;
      series.push({
        name: "全专业排名",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(" + hexToRgb(color2[cc]) + ", 0.6)"
                },
                {
                  offset: 0.8,
                  color: "rgba(" + hexToRgb(color2[cc]) + ", 0.2)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: "rgb(" + hexToRgb(color2[cc]) + ")",
            borderColor: "rgba(" + hexToRgb(color2[cc]) + ",0.2)",
            borderWidth: 12
          }
        },
        data: tmpObj
      });
      cc++;
      var lgData = [];
      lgData.push("全专业排名");
      for (var k in zys) {
        lgData.push(zys[k].name);
        var zData = getArr(zys[k].lqfb);
        itv[zys[k].name] = zys[k].interval;
        series.push({
          name: zys[k].name,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(" + hexToRgb(color2[cc]) + ", 0.6)"
                  },
                  {
                    offset: 0.8,
                    color: "rgba(" + hexToRgb(color2[cc]) + ", 0.2)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: "rgb(" + hexToRgb(color2[cc]) + ")",
              borderColor: "rgba(" + hexToRgb(color2[cc]) + ",0.2)",
              borderWidth: 12
            }
          },
          data: zData
        });
        cc++;
      }
      series.push({
        name: "当前名次",
        type: "effectScatter",
        data: [[parseInt(userRank), 1]],
        label: {
          normal: {
            show: true,
            formatter: function(param) {
              return "我的名次:" + userRank;
            },
            position: "top",
            offset: [0, -15],
            textStyle: {
              fontWeight: "bolder",
              fontSize: 16
            }
          }
        }
      });
      max = max > userRank ? max : userRank;
      option = {
        title: {
          left: "center",
          text: yxmc + "历年录取考生名次分布图——" + pcname
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          },
          formatter: function(params) {
            var str = "";
            var arr = [];
            arr = params;
            for (var i = 0; i < arr.length; i++) {
              var obj = arr[i];
              if (i == 0 && obj["seriesType"] == "effectScatter") {
                break;
              } else if (i == 0 && obj["value"][1] > 0) {
                var fb = obj["axisValue"];
                if (fb == 0) str = "名次：1-" + (fb + td) + "<br/>";
                else str = "名次：" + fb + "-" + (fb + td) + "<br/>";
                str += "录取" + obj["value"][1] + "人<br/>";
              }
            }
            return str;
          }
        },
        legend: {
          data: lgData,
          selectedMode: "single",
          bottom: "8%"
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          name: "考生排名",
          nameLocation: "middle",
          nameGap: 25,
          nameTextStyle: {
            fontWeight: "bolder",
            fontSize: 16
          },
          max: "dataMax",
          min: "dataMin",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#57617B"
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: "招生数",
          nameTextStyle: {
            fontWeight: "bolder",
            fontSize: 16
          },
          min: 0,
          max: "dataMax",
          minInterval: 1,
          interval: maxY < 20 ? 1 : maxY < 50 ? 5 : maxY < 100 ? 10 : 20,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#57617B"
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        series: series
      };
      myChart.setOption(option);

      myChart.on("legendselectchanged", function(params) {
        //console.log(params.name);
        td = itv[params.name];
        option.tooltip.formatter = function(params) {
          var str = "";
          var arr = [];
          arr = params;
          for (var i = 0; i < arr.length; i++) {
            var obj = arr[i];
            if (i == 0 && obj["seriesType"] == "effectScatter") {
              break;
            } else if (i == 0 && obj["value"][1] > 0) {
              var fb = obj["axisValue"];
              if (fb == 0) str = "名次：1-" + (fb + td) + "<br/>";
              else str = "名次：" + fb + "-" + (fb + td) + "<br/>";
              str += "录取" + obj["value"][1] + "人<br/>";
            }
          }
          return str;
        };
        myChart.setOption(option);
      });

      function getArr(obj) {
        var ro = [];
        var st = [];
        for (var key in obj) {
          var k = parseInt(key);
          if (max < k) max = k;
          st.push(k);
          //ro.push([k, obj[key]]);
        }
        st.sort(function(a, b) {
          return a - b;
        });

        for (var i = 0; i < st.length; i++) {
          ro.push([st[i], obj[st[i].toString()]]);
        }
        //console.log(ro);
        return ro;
      }

      function getMax(obj) {
        var ro = [];
        var st = [];
        for (var key in obj) {
          var k = parseInt(obj[key]);
          if (max < k) max = k;
          st.push(k);
          //ro.push([k, obj[key]]);
        }
        st.sort(function(a, b) {
          return a - b;
        });
        //console.log(ro);
        return st[st.length - 1];
      }
    },
    changePc(pcdm) {
      for (var key in this.pcMap) {
        if (key === pcdm) {
          this.pcMap[key].state = true;
        } else {
          this.pcMap[key].state = false;
        }
      }

      var obj = this.pcMap[pcdm];
      var pc = obj.pcdm;
      var allYearfb = obj.allYearfb;
      var userRank = obj.userRank;
      var yxmc = obj.yxmc;
      this.gl = (obj.gl * 100).toFixed(2);

      if (pc.indexOf("h") === -1) {
      } else {
        pc = pc.substring(2);
      }

      if (allYearfb == undefined || allYearfb == null) {
        // this.showChartState = false;
        // this.showChartMsg = obj.editInfo;
      } else {
        // this.showChartState = true;
        if (allYearfb == undefined || allYearfb == null) {
        } else {
          this.showEchart(allYearfb, yxmc, userRank, pc);
        }
      }
    },
    getGLcss(gl) {
      var float = parseFloat(gl).toFixed(3) * 100;
      if (float > 70) {
        return "success";
      } else if (float > 30) {
        return "warning";
      } else {
        return "danger";
      }
    }
  },
  mounted() {
    const estimateParam = JSON.parse(localStorage.getItem("user"));
    this.initYxPinggu();
    //测试时 使用测试账号
    // this.userId = "13565869085";

    // 正式环境使用
    this.userId = estimateParam.userId;

    this.getData();
    this.initZsInfo();
  },
  watch: {
    selctPc: function(val) {
      this.changePc(val.pcdm);
    }
  },
  filters: {
    formatDiscount(val) {
      var str = Number(val * 100).toFixed(2);

      //return Math.round(str);
      return str;
    }
  }
};
</script>
<style>
.gdap-esticollege
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  background-color: #fff !important;
  border-color: #f3a111 !important;
  color: #f3a111;
}

.B {
  color: #f3a111;
}

.C {
  color: #f4384c;
}

.A {
  color: #37bb4e;
}
.el-progress {
  width: 80%;
  float: left;
  margin: -1em 9em;
}
.el-progress-bar__inner {
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -moz-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -o-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -ms-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: linear-gradient(left, #f36d6d, #5ee9a6);
}
.el-progress-bar__inner:after {
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -moz-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -o-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -ms-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: linear-gradient(top, #f36d6d, #5ee9a6);
}
</style>